<template>
  <!-- 危急值 -->
  <div id="criticalValueQuery">
    <Breadcrumb content="全院危急值查询" />
    <div class="bodyContent">
      <vxe-toolbar perfect>
        <template #buttons>
          <vxe-form ref="criticalValueQueryForm" title-align="right" title-width="60" :data="form">
            <vxe-form-gather span="24">
              <vxe-form-item title="患者姓名" field="patNa">
                <template #default="{ data }">
                  <vxe-input v-model="data.patNa" clearable @clear="findWtList"
                    @keyup.enter.native="findWtList"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="科室" field="depId">
                <template #default="{ data }">
                  <vxe-select v-model="data.reqDept" placeholder="科室" clearable class-name="width-100-percentage">
                    <vxe-option v-for="(item, index) in deptOptions" :key="index" :label="item.name"
                      :value="item.id"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>

              <vxe-form-item title="上报日期" field="noticeDate">
                <template #default="{ data }">
                  <vxe-input v-model="data.noticeDateStart" placeholder="开始日期" type="datetime" transfer
                    @change="findWtList"></vxe-input>
                  至
                  <vxe-input v-model="data.noticeDateEnd" placeholder="结束日期" type="datetime" transfer
                    @change="findWtList"></vxe-input>
                </template>
              </vxe-form-item>
            </vxe-form-gather>
            <vxe-form-gather span="24">
              <vxe-form-item title="病历号" field="patNo">
                <template #default="{ data }">
                  <vxe-input v-model="data.patNo" clearable @clear="findWtList"
                    @keyup.enter.native="findWtList"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="病人类型" field="patType">
                <template #default="{ data }">
                  <vxe-select v-model="data.patType" placeholder="请选择病人类型" clearable class-name="width-100-percentage">
                    <vxe-option v-for="(item, index) in patTypeList" :key="index" :label="item.name"
                      :value="item.code"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
              <vxe-form-item title="审核状态" field="stateCode">
                <template #default="{ data }">
                  <vxe-select v-model="data.stateCode" placeholder="请选择病人类型" clearable class-name="width-100-percentage">
                    <vxe-option v-for="(item, index) in stateCodeList" :key="index" :label="item.name"
                      :value="item.code"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
              <vxe-form-item>
                <template #default>
                  <vxe-button type="text" class="button-blue" content="查询" @click="findWtList"></vxe-button>
                  <!-- <vxe-button type="text" class="button-blue" content="导出" @click="htmlToExcel"></vxe-button> -->
                  <!-- <vxe-button type="text" class="button-red" content="删除" @click="handleDelete"></vxe-button> -->
                </template>
              </vxe-form-item>
            </vxe-form-gather>
          </vxe-form>
        </template>
      </vxe-toolbar>

      <div class="tableBody">
        <vxe-table ref="criticalValueQueryTable" v-loading="loading" border height="100%" :data="criticalValueQueryList"
          align="left" :row-config="{ isCurrent: true, isHover: true }" resizable show-overflow
          @current-change="handleRowClick">
          <vxe-column type="seq" title="#" width="30"></vxe-column>
          <vxe-column field="stateCode" title="状态" width="80" align="center">
            <template #default="{ row }">
              {{ getIsStaticStatusDesc(row) }}
            </template>
          </vxe-column>
          <vxe-column title="操作" width="100" align="center">
            <template #default="{ row }">
              <!-- <vxe-button type="primary" @click="editEvent(row)" :icon="Search">详情</vxe-button> -->
              <el-button :icon="Search" @click="particulars(row)" class="custom-button">详情</el-button>
            </template>
          </vxe-column>

          <vxe-column field="patNo" title="病历号" width="120" align="center">
            <template #default="{ row }">
              <span>{{ row.patNo }}</span>
            </template>
          </vxe-column>
          <vxe-column field="patNa" title="病人姓名" align="center">
            <template #default="{ row }">
              <span>{{ row.patNa }}</span>
            </template>
          </vxe-column>
          <vxe-column field="reportDeptNa" title="科室" align="center">
            <template #default="{ row }">
              <span>{{ row.reportDeptNa }}</span>
            </template>
          </vxe-column>
          <vxe-column field="bedNo" title="床号" align="center">
            <template #default="{ row }">
              <span>{{ row.bedNo }}</span>
            </template>
          </vxe-column>
          <vxe-column field="itemNo" title="检测项目" align="center">
            <template #default="{ row }">
              <span>{{ row.itemNo }}</span>
            </template>
          </vxe-column>
          <vxe-column field="currentResult" title="结果" align="center"></vxe-column>
          <vxe-column field="reportPersonNa" title="上报人" align="center"></vxe-column>
          <vxe-column field="reportTime" title="上报时间" width="120" align="center">
            <template #default="{ row }">
              <span>{{ row.reportTime }}</span>
            </template>
          </vxe-column>
          <!-- <vxe-column field="remark" title="备注"></vxe-column> -->
          <vxe-column field="treatmentMeasure" title="处理措施" width="120" align="center">
            <template #default="{ row }">
              <span>{{ row.treatmentMeasure }}</span>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <el-dialog title="危急值详情" :show-close="false" v-model="showDialog" append-to-body width="1000px"
        :close-on-click-modal="false" destroy-on-close v-if="showDialog">
        <el-scrollbar style="height: 100%">
          <el-descriptions :column="3"
            :labelStyle="{ width: '110px', background: '#fff', color: '#000', textAlign: 'center' }"
            :contentStyle="{ width: '130px' }" border>
            <template #title>
              <div class="smallToolTitle">病人信息
              </div>
            </template>
            <el-descriptions-item label="姓名">
              <vxe-input disabled v-model="criReportform.patNa"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="性别">
              <vxe-input disabled v-model="criReportform.sex"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="年龄">
              <vxe-input disabled v-model="criReportform.age"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="病历号">
              <vxe-input disabled v-model="criReportform.patNo"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="就诊类别">
              <vxe-input disabled v-model="criReportform.patType"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="床位号">
              <vxe-input disabled v-model="criReportform.bedNo"></vxe-input>
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions :column="3"
            :labelStyle="{ width: '110px', background: '#fff', color: '#000', textAlign: 'center' }"
            :contentStyle="{ width: '130px' }" border>
            <template #title>
              <div class="smallToolTitle">检查信息
              </div>
            </template>
            <el-descriptions-item label="申请单号">
              <vxe-input disabled v-model="criReportform.requestNo"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="危急值类型">
              <vxe-input v-model="criReportform.criticalType"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="检查部位">
              <vxe-input v-model="criReportform.specification"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="申请科室">
              <vxe-input v-model="criReportform.equiptName"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="申请医生">
              <vxe-input v-model="criReportform.equiptName"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="申请时间">
              <vxe-input v-model="criReportform.equiptName"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="报告科室">
              <vxe-input v-model="criReportform.reportDeptNa"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="报告医生">
              <vxe-input v-model="criReportform.reportPersonNa"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item label="报告时间">
              <vxe-input v-model="criReportform.reportTime"></vxe-input>
            </el-descriptions-item>
            <el-descriptions-item :span="3" label="项目">
              <vxe-textarea v-model="criReportform.itemNa"></vxe-textarea>
            </el-descriptions-item>
            <el-descriptions-item :span="3" label="结果">
              <vxe-textarea v-model="criReportform.currentResult"></vxe-textarea>
            </el-descriptions-item>
            <el-descriptions-item :span="3" label="诊断">
              <vxe-textarea v-model="criReportform.itemException"></vxe-textarea>
            </el-descriptions-item>
            
          </el-descriptions>
          <!-- <el-descriptions :column="3"
            :labelStyle="{ width: '110px', background: '#fff', color: '#000', textAlign: 'center' }"
            :contentStyle="{ width: '130px' }" border>
            <template #title>
              <div class="smallToolTitle">护士接收
              </div>
            </template>

            <el-descriptions-item label-class-name="lableClass" class-name="contentClass9" :span="9">
              <div style="text-indent: 2em">
                已接收危急值，立即通知（
                <el-select class="employee-input-W" v-model="criReportform.correctionVar" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.label"></el-option>
                </el-select>
                ）医生处理
              </div>
            </el-descriptions-item>
          </el-descriptions> -->
        </el-scrollbar>

        <!-- <div class="dialog-footer flex right justify-end">
          <el-button @click="closeDialog">关闭</el-button>
        </div> -->
        <div class="foote1r">
          <el-form :inline="true">
            <el-row>
              <el-col :offset="2">
                <el-form-item>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-close"  content="关闭" @click="closeDialog"></vxe-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
    </el-dialog>
  </div>
</div></template>
<script lang="ts" setup>
import Breadcrumb from '@/components/Breadcrumb.vue';
import { reactive, ref, defineExpose, getCurrentInstance, onMounted } from 'vue';
import { IsEmpty, sortByField, formatDateTime } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from "@/utils/CommonMessage";
import SelectWorkGroupAll from '../lab_bus/components/SelectWorkGroupAll.vue'; //报告单元默认全部引入下拉组件
import SelectItemGrid from '../lab_bus/components/SelectItemGrid.vue';
import { AppStore } from '@/stores/store';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

let store = AppStore();
let { proxy }: any = getCurrentInstance();
let loading = ref(false);
let criticalValueQueryList = reactive([]);
let patTypeList = reactive([]);//字典:病人类型
let showDialog = ref(false); //添加弹框展示状态
let criReportform: any = reactive({});
//let stateCodeList = reactive([]);//字典:审核状态

const stateCodeList = [
  {
    name: '全部',
    code: 0,
  },
  {
    name: '已审核',
    code: 1,
  },
  {
    name: '未审核',
    code: 2,
  }
]

let form = reactive({
  /*  orgId: store.userInfo.orgId,
    orgName: store.userInfo.orgName,*/
  orgId: '',
  orgName: '',
  noticeDateStart: formatDateTime(new Date(), 'yyyy-MM-dd'),
  noticeDateEnd: formatDateTime(new Date(), 'yyyy-MM-dd') + ' 23:59:59',
  rptGroup: null,
  itemNo: null,
  patType: '',
  reqDept: '',
  patNo: '',
  patNa: '',
  stateCode: 0
});
let formData = reactive({});
let deptOptions: any = reactive([]); //选择框
const orgList = store.userInfo.orgList;
let defaultProps = {
  children: 'children',
  label: 'name'
};

// 页面加载时字典
onMounted(() => {
  getDepyOptions(); //获取科室
  getDictPatTypeList();//病人类型
});

//行点击时间
function handleRowClick({ row }) {
  Object.assign(formData, row);
  proxy.$refs.criticalValueQueryTable.setCurrentRow(row);
}

function htmlToExcel(title = '危急值表格') {
  (proxy.$refs.criticalValueQueryTable as any).exportData({ type: 'csv', filename: title, useStyle: true });
}

function getIsStaticStatusDesc(row) {
  if (row.stateCode == 0 || row.stateCode == 10 || row.stateCode == 20) {
    return '未审核';
  } else {
    return '已审核';
  }
}
function getIsStaticTagType(row) {
  if (row.isReport == 1) {
    return 'success';
  } else if (row.isReport == 0) {
    return 'danger';
  }
}

// 点击删除
async function handleDelete() {


  if (IsEmpty(formData) || IsEmpty(formData.id)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.warning);
    return;
  }
  let data: any = {
    id: formData.id
  };
  proxy.$confirm('确定删除此数据？', '提示', {
    cancelButtonClass: 'cancel-button',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      proxy.$http
        .get('/lab/criticalReport/deleteCriticalReportInfo', { params: data })
        .then((res: any) => {
          if (res.status.code === 1) {
            VxeMessage('删除成功', VxeNotifyType.success);
            findWtList();
          } else {
            VxeMessage('删除失败', VxeNotifyType.error);
          }
        })
        .catch((err: any) => {
          VxeMessage('删除异常', VxeNotifyType.error);
        });
    });

}

// function handleOrgNodeClick(data: any) {
//   form.orgId = data.id;
//   form.orgName = data.name;
//   findWtList();
//   const selectOrgRef: any = proxy.$refs['selectOrgRef'];
//   selectOrgRef.blur();
// }


// 获取所有部门选项(下拉框)
function getDepyOptions() {
  const url = '/api/sys/findDepartmentList';
  proxy.$http
    .get(url, { params: { orgId: store.userInfo.orgId } })
    .then((res: any) => {
      deptOptions.push(...res.data.deptList);
    })
    .catch((err: any) => {
      VxeMessage('获取所有部门选项(下拉框)失败', VxeNotifyType.error);
    });
}
function getDictPatTypeList() {
  patTypeList.length = 0;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
    .get(url, { params: { code: 'PATTYPE' } })
    .then((res: any) => {
      patTypeList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function findWtList() {
  criticalValueQueryList.length = 0;
  const url = '/cri/critical/report/findCriticalReportInfo';

  form.noticeDateStart = IsEmpty(form.noticeDateStart) ? '' : formatDateTime(form.noticeDateStart, 'yyyy-MM-dd') + ' 00:00:00';
  form.noticeDateEnd = IsEmpty(form.noticeDateEnd) ? '' : formatDateTime(form.noticeDateEnd, 'yyyy-MM-dd') + ' 23:59:59';
  proxy.$http
    .post(url, form)
    .then((res: any) => {
      criticalValueQueryList.length = 0;
      proxy.$nextTick(() => {
        criticalValueQueryList.push(...res.data);
        handleRowClick({ row: res.data[0] });
      })

      loading.value = false;
    })
    .catch(err => {
      loading.value = false;
      VxeMessage(err, VxeNotifyType.error);
    });
}

function particulars(row: any) {
  showDialog.value = true;
  Object.assign(criReportform, row);
}
function closeDialog() {
  showDialog.value = false;
}
</script>
<style lang="scss" scoped>
#criticalValueQuery {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .vxe-form {
      padding: 5px 10px;

      :deep(.vxe-form--item) {
        margin: 0 10px 0 0;
      }
    }

    .tableBody {
      background-color: $base-white;
      height: calc(100% - 76px);
    }
  }

  .custom-button {
    width: 100%;
    /* 按钮宽度铺满单元格 */
    color: rgb(161, 133, 7);
    /* 字体颜色设置为黄色 */
    background-color: transparent; /* 背景颜色设置为透明 */
    border: none; /* 去除边框 */
    box-shadow: none; /* 去除阴影 */
  }

  .custom-button .el-icon {
    color: rgb(161, 133, 7);
    /* 图标颜色设置为黄色 */
  }

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 0 5px 0 0;
  }

  // 表格最左侧5px间距
  :deep(.vxe-cell) {
    padding-left: 5px;
  }

  :deep(.vxe-form) {

    .vxe-input.type--datetime,
    .vxe-input.type--date {
      width: 150px;
    }

    .el-date-editor {
      height: 24px;
    }

    .el-range-editor.el-input__inner {
      padding: 0;
      width: 320px;
      border-radius: 0;
    }
  }
}</style>
